<template>
  <el-scrollbar height="85vh">
    <!-- 左右布局 -->
    <template v-if="userResumeStore.resumeJsonNewStore.LAYOUT === 'leftRight'">
      <div class="container">
        <div class="word">
          <el-form-item
            label="左侧主题颜色:"
            prop="name"
            size="small"
          ></el-form-item>
        </div>
        <ColorPicker
          v-model="
            userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.leftThemeColor
          "
        ></ColorPicker>
      </div>
      <div class="container">
        <div class="word">
          <el-form-item
            label="左侧容器宽度:"
            prop="name"
            size="small"
          ></el-form-item>
        </div>
        <div class="input">
          <el-input-number
            v-model="form.leftWidth"
            :min="0"
            :max="820"
            @change="changeLeft"
          />
        </div>
      </div>
      <div class="container">
        <div class="word">
          <el-form-item
            label="右侧主题颜色:"
            prop="name"
            size="small"
          ></el-form-item>
        </div>
        <ColorPicker
          v-model="
            userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.rightThemeColor
          "
        ></ColorPicker>
      </div>
      <div class="container">
        <div class="word">
          <el-form-item
            label="右侧容器宽度:"
            prop="name"
            size="small"
          ></el-form-item>
        </div>
        <div class="input">
          <el-input-number
            v-model="form.rightWidth"
            :min="0"
            :max="820"
            @change="changeRight"
          />
        </div>
      </div>
    </template>
    <div class="container">
      <div class="word">
        <el-form-item label="主题颜色:" prop="name" size="small"></el-form-item>
      </div>
      <!-- 需要改变每一个模块COMPONENT的主题颜色，无法直接用v-model -->
      <ColorPicker @changeColor="changeThemeColor"></ColorPicker>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="模块标题字体大小:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-select
          v-model="
            userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.firstTitleFontSize
          "
          class="m-2"
          placeholder="Select"
          @change="modelFontsize"
        >
          <el-scrollbar height="25vh">
            <el-option
              v-for="item in fontSizeList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-scrollbar>
        </el-select>
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="二级标题字体大小:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-select
          v-model="
            userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.secondTitleFontSize
          "
          @change="changeSecondTitle"
          class="m-2"
          placeholder="Select"
        >
          <el-scrollbar height="25vh">
            <el-option
              v-for="item in fontSizeList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-scrollbar>
        </el-select>
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="正文字体大小:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-select
          v-model="userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.textFontSize"
          @change="changetextFontSize"
          class="m-2"
          placeholder="Select"
        >
          <el-scrollbar height="25vh">
            <el-option
              v-for="item in fontSizeList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-scrollbar>
        </el-select>
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="二级标题字体颜色:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <ColorPicker @changeColor="changeSecondColor"></ColorPicker>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="正文字体颜色:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <ColorPicker @changeColor="changeTextColor"></ColorPicker>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="二级标题字体粗细:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-select
          v-model="
            userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.secondTitleWeight
          "
          @change="changeSecondWeight"
          class="m-2"
        >
          <el-scrollbar height="25vh">
            <el-option
              v-for="item in fontWeightList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-scrollbar>
        </el-select>
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="正文字体粗细:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-select
          v-model="
            userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.textFontWeight
          "
          @change="changetextFontWeight"
          class="m-2"
          placeholder="500"
        >
          <el-scrollbar height="25vh">
            <el-option
              v-for="item in fontWeightList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-scrollbar>
        </el-select>
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="模块上外边距:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-input-number
          v-model="modelMTop"
          :min="-100"
          :max="100"
          @change="changeTop"
        />
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="模块下外边距:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-input-number
          v-model="modelMbottom"
          :min="-100"
          :max="100"
          @change="changeBottom"
        />
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="模块上内边距:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-input-number
          v-model="pTop"
          :min="0"
          :max="100"
          @change="changepTop"
        />
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="模块下内边距:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <!-- 这里v-model只能绑定数字 -->
        <el-input-number
          v-model="pBottom"
          :min="0"
          :max="100"
          @change="changepBottom"
        />
      </div>
    </div>
    <div class="container">
      <div class="word">
        <el-form-item
          label="模块左右内边距:"
          prop="name"
          size="small"
        ></el-form-item>
      </div>
      <div class="input">
        <el-input-number
          v-model="pLeftRight"
          :min="-100"
          :max="100"
          @change="changepLeftRight"
        />
      </div>
    </div>
  </el-scrollbar>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue'
import ColorPicker from '@/components/ColorPicker/ColorPicker.vue'
import { useResumeJsonStore } from '@/store/resume'
import { fontSizeList } from '@/hooks/useFontSizeList'
import { pxTonumber } from '@/util/common'
const fontWeightList = reactive<Array<number>>([
  100, 200, 300, 400, 500, 600, 700, 800, 900,
])
let userResumeStore = useResumeJsonStore()
// const leftColor = ref(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.leftThemeColor)
// const rightColor = ref(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.rightThemeColor)
// const themeColor = ref(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.themeColor)
//复选框— +
// const handleChange = (value: number) => {
//   console.log(value)
// }

const form = reactive({
  leftWidth: 270,
  rightWidth: 550,
})
//左右布局盒子大小
const changeLeft = (value: number) => {
  userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.leftWidth = `${value}px`
  userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.rightWidth = `${
    820 - value
  }px`
}
const changeRight = (value: number) => {
  userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.rightWidth = `${value}px`
  userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.leftWidth = `${820 - value}px`
}
//主题颜色
const changeThemeColor = (value: string) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.themeColor = value),
  )
}
//二级标题颜色
const changeSecondColor = (value: string) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.titleColor = value),
  )
}
//正文字体颜色
const changeTextColor = (value: string) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.textColor = value),
  )
}
//模块上、下外边距 上下左右内边距
const modelMTop = ref<number>(
  pxTonumber(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.modelMarginTop),
)
const modelMbottom = ref<number>(
  pxTonumber(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.modelMarginBottom),
)
const pTop = ref<number>(
  pxTonumber(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.pTop),
)
const pBottom = ref<number>(
  pxTonumber(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.pBottom),
)
const pLeftRight = ref<number>(
  pxTonumber(userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.pLeftRight),
)
//模块标题字体大小
const modelFontsize = (value: string) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.firstTitleFontSize = value),
  )
}
//二级标题字体大小
const changeSecondTitle = (value: string) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.titleFontSize = value),
  )
}
//正文字体大小
const textFontSize = ref<string>('14px')
const changetextFontSize = (value: string) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.textFontSize = value),
  )
}
//二级标题字体粗细
const changeSecondWeight = (value: number) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.titleFontWeight = value),
  )
}
//正文粗细
const changetextFontWeight = (value: number) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.textFontWeight = value),
  )
}
//模块上、下外边距 上下左右内边距
const changeTop = (value: number) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.mTop = `${value}px`),
  )
}
const changeBottom = (value: number) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.mBottom = `${value}px`),
  )
}
const changepTop = (value: number) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.pTop = `${value}px`),
  )
}
const changepBottom = (value: number) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.pBottom = `${value}px`),
  )
}
const changepLeftRight = (value: number) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.pLeftRight = `${value}px`),
  )
}
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 10px 0 10px;
  display: flex;

  .word {
    width: 40%;
  }

  .input {
    width: 60%;
  }

  .active {
    color: aquamarine;
  }
}
</style>
